<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue相关面试题</title>
</head>
<body>
组件

// 全局注册 自定义组件 自定义指令 自定义过滤器
    Vue.component("自定义组件名字", ...)
    Vue.directive("自定义指令名字", ...)
    Vue.filter("自定义过滤器名字", ...)
//组件中注册
    components("自定义组件名字", ...)
    directives("自定义指令名字", ...)
    filters("自定义过滤器名字", ...)


组件中的data为什么是个函数
//1. 首先,如果组件中的data不是一个函数,肯定是会报错的
//2. 其实,主要原因是,因为我们写组件都是为了把相同的代码或者功能给抽离出来,并且需要他们之间互不影响,此时,如果组件中的data不是一个函数的话,那么由于data数据类型是一个对象,也就是一个引用的数据类型,那么每次在创建和使用此组件的时候就会直接的使用共同的内存地址,那么这个时候,其实所有的组件中的data都是一个内存地址,并且都指向了同一块内存空间,然后每次修改data中的数据,其他的组件都会受到影响,很明显这样是不符合我们拆分组件的初衷的,所以为了避免这种事情的发生,我们把组件中的data让他成为一个函数,并且把data的值通过函数返回值的形式去创建出来,这样每次在创建组件的时候都相当于重新的创建了一个新的data对象,并且这个对象和之前所有的组件互不影响

父子组件生命周期
    父组件,beforeCreate  创建父组件开始
    父组件,created  创建父组件data数据,此时还没有dom什么事
    父组件,beforeMount 开始创建dom 发现有子组件需要渲染
    子组件===>,beforeCreate  开始创建子组件
    子组件===>,created  创建完成子组件数据
    子组件===>,beforeMount 开始创建子组件dom元素
    子组件===>,mounted 创建完成子组件
    父组件,mounted 把所有子组件都创建完成 然后父组件本身也创建完成

计算属性和监听属性应用场景
    //这两种场景都是来数据 当data中数据发生改变之后来做的一些操作的, 计算属性一般只是使用数据进行计算
    //监听属性  (可以监听路由)==>一般用在 当数据发生改变之后来做一些异步的操作等 当页面中某个数据发生改变的时候 需要通知给后台服务器, 那么这个时候 就可以在监听属性中去触发

自定义指令

vue中mixins(混入)的使用

<div id="app">
    <p>{{msg}}</p>
    <p v-my-show="isShow">1234</p>
    <p v-my-show="1==2">12345678</p>
    <p>------组件一--------</p>
    <test01></test01>
    <p>------组件二--2------</p>
    <test02></test02>
    <p>------组件三--2------</p>
    <test02></test02>
    <p>------组件四--2------</p>
    <test02></test02>
</div>
</body>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>

    //组件中的data如果不是一个函数,是会报错
    // The "data" option should be a function that returns a per-instance value in component definitions.
    let data = {
        name: 100
    }

    Vue.component("test02", {
        template: "<p>{{name}}<button @click='name++'>+</button></p>",
        data: function () {
            return data
        }
    })

    Vue.directive("myShow", {
        bind(el,binding,oldVNode,newVNode){//初始化
            el.style.display =  binding.value?"block":"none";
        }
    })
    const vm = new Vue({
        el: "#app",
        data: {
            msg: "haha",
            isShow: true
        },
        // filters:{
        //     "过滤器的名字":function () {
        //
        //     }
        // },
        directives:{
            "myShow": {
                bind(el,binding,oldVNode,newVNode){//初始化
                    //el,  //当前指令所作用的元素
                    //binding, //与当前指令所相关的一些数据 比如expression value oldvalue或者指令参数等等
                    //oldVNode, //旧的虚拟节点
                    //newVNode //新的虚拟节点
                    console.log(el);
                    console.log(binding);
                    el.style.display =  binding.value?"block":"none";
                },
                inserted(el,binding,oldVNode,newVNode){},//当元素被插入到页面中
                update(el,binding,oldVNode,newVNode){},//数据更新
                componentUpdated(el,binding,oldVNode,newVNode){}, //组件更新
                unbind(el,binding,oldVNode,newVNode){}//移除这个元素
            }
        },
        components: {
            "test01": {
                template: "<p>test1111111101</p>",
                beforeCreate() {
                    console.log("子组件===>,beforeCreate")
                },
                created() {
                    console.log("子组件===>,created")
                },
                beforeMount() {
                    console.log("子组件===>,beforeMount")
                },
                mounted() {
                    console.log("子组件===>,mounted")
                }
            }
        },
        beforeCreate() {
            console.log("父组件,beforeCreate")
        },
        created() {
            console.log("父组件,created")
        },
        beforeMount() {
            console.log("父组件,beforeMount")
        },
        mounted() {
            console.log("父组件,mounted")
        }
    });

</script>
<script>
    // let data = {
    //     name: 100
    // }
    // function newData() {
    //     return data
    // }
    function newData() {
        return {
            name: 100
        }
    }
    let a1 = newData();
    let a2 = newData();
    a1.name = 1000;
    console.log(a1, a2, a2.name)
</script>
</html>